<template>
  <div id="sidebar">
    <AvaTar/>
    <div class="icons">
      <router-link to="/note" title="笔记">
        <svg class="icon">
          <use xlink:href="#icon-note"></use>
        </svg>
      </router-link>
      <router-link to="/notebooks" title="笔记本">
        <svg class="icon">
          <use xlink:href="#icon-notebook"></use>
        </svg>
      </router-link>
      <router-link to="/trash" title="回收站">
        <svg class="icon">
          <use xlink:href="#icon-trash"></use>
        </svg>
      </router-link>
    </div>
    <div class="logout">
      <svg class="icon" @click="logout">
        <use xlink:href="#icon-tuichu"></use>
      </svg>
    </div>
  </div>
</template>


<script>

import AvaTar from '@/components/AvaTar'
import Auth from '@/apis/author'

export default {
  components: {
    AvaTar
  },
  methods: {
    logout() {
      // eslint-disable-next-line no-unused-vars
      Auth.logout().then(data => {this.$router.push({path: 'login'})})
    }
  }
}
</script>

<style lang="less" scoped>

#sidebar {
  position: relative;
  width: 56px;
  text-align: center;
  background: #2c333c;
}

.icons {
  margin-top: 15px;
}

.icon {
  width: 20px;
  height: 20px;
}

a {
  padding: 6px 0;
  display: block;
}

.router-link-active {
  background: #5e6266;
}

.logout {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  cursor: pointer;
}
</style>